<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body class="login-page">
<div class="login-container">
    <h1>用户注册</h1>
    <form id="registerForm">
        <input type="text" id="username" placeholder="用户名" required>
        <input type="password" id="password" placeholder="密码" required>
        <button type="submit">注册</button>
    </form>
    <p id="registerMessage" class="message"></p>
    <p>已有账号？<a href="login.html">立即登录</a></p>
</div>

<script>
    const registerForm = document.getElementById("registerForm");
    const registerMessage = document.getElementById("registerMessage");

    registerForm.addEventListener("submit", async (e) => {
        e.preventDefault();
        const username = document.getElementById("username").value;
        const password = document.getElementById("password").value;

        try {
            const response = await fetch("http://127.0.0.1:36985/api/v1/users/register", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ username, password }),
            });

            if (!response.ok) throw new Error("注册失败");

            const result = await response.json();
            registerMessage.textContent = "注册成功！";
            setTimeout(() => {
                window.location.href = "login.html"; // 注册成功后跳转到登录页面
            }, 1000);
        } catch (error) {
            registerMessage.textContent = "注册失败：" + error.message;
        }
    });
</script>
</body>
</html>